<template>
  <div
    style="height: 100%"
    class="RootLoading"
    :style="{
      background: `url(${bgUrl})`,
      backgroundSize: '100%',
    }"
    v-loading="autoLoading"
    element-loading-text="自动登录中..."
  >
    <!-- <van-form style="width:100%;border-radius: 4px;background:#fff;">
        <van-field
          v-model="username"
          name="username"
          required
          label="用户名"
          placeholder="用户名"
          style="background:none;"
          clearable
        />
        <van-field
          v-model="password"
          required
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          style="background:none;"
          clearable
        />
      </van-form>
      <van-button type="info" native-type="submit" style="width:100%;border-radius: 4px;margin-top:2.5rem;" @click="handleLogin">登录</van-button>
      <div class="weixin"><span>其他登录方式：</span><img src="@/assets/logo/weixin.png" alt="" title="微信登录" @click="wxlogin"></div> -->
    <div class="content">
      <div class="lable-item">
        <span>账号</span>
        <el-input
          v-model="username"
          placeholder="请输入账号(账号为身份证号码)"
          clearable
        ></el-input>
      </div>
      <div class="lable-item">
        <span>密码</span>
        <el-input
          clearable
          v-model="password"
          type="password"
          placeholder="请输入密码(密码为身份证后四位)"
          show-password
        ></el-input>
      </div>
      <van-button
        :disabled="loading"
        type="info"
        native-type="submit"
        style="
          width: 100%;
          border-radius: 4px;
          margin-top: 5px;
          height: 3.5rem;
          font-size: 1.2rem;
        "
        @click="handleLogin"
        >登录</van-button
      >
      <div
        v-if="isShowLogJ"
        style="
          height: 6.6vh;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 1.7vh;
          font-size: 1.2rem;
        "
        @click="openLink"
      >
        注册
      </div>
      <el-divider>其他登录方式</el-divider>
      <div
        class="weixin"
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
        "
      >
        <img
          src="@/assets/logo/weixin.png"
          alt=""
          title="微信登录"
          @click="wxlogin"
        />
      </div>
    </div>
    <div
      class="footer"
      style="
        width: 100%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        font-size: 0.75rem;
      "
      v-if="href.indexOf('sddl') == -1 && href.indexOf('6868618') == -1"
    >
      本平台由
      <a
        href="https://mp.weixin.qq.com/s/_KTk3plFZ_WiIPTh3UzDnA"
        style="color: #1989fa"
        >泰捷云学</a
      >
      提供技术支持
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
import { mapGetters } from "vuex";
// import face from '@/components/Face/photo.vue'
import wfqa from "@/assets/mobile/mobile-wfqa.png";
import bg from "@/assets/mobile/banner.jpg";
import { setwxstate, getwxstate, delwxstate } from "@/utils/auth.js";
import { getcodev2, getopenid, console } from "@/api/admin.js";
export default {
  computed: {
    ...mapGetters(["initObj"]),
  },
  // components:{
  //   face
  // },
  data() {
    return {
      loading: false,
      bgUrl: "",
      username: "",
      password: "",
      isface: true,
      isShowLogJ: false, //是否显示报名链接
      href:
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API
          : window.location.href.slice(
              0,
              window.location.href.indexOf("/user")
            ) + this.$platformList,
      autoLoading: false,
    };
  },
  methods: {
    // 登录
    handleLogin() {
      if (
        this.username == "" ||
        this.username == "null" ||
        this.username == "undefined"
      ) {
        return Notify({ type: "warning", message: "请输入账号" });
      }
      if (
        this.password == "" ||
        this.password == "null" ||
        this.password == "undefined"
      ) {
        return Notify({ type: "warning", message: "请输入密码" });
      }
      this.loading = true;
      this.$store
        .dispatch("user/login", {
          username: this.username,
          password: this.password,
        })
        .then((res) => {
          // console.log(res,'登录')
          this.$router
            .push({
              path: "/home",
            })
            .then(() => {
              this.loading = false;
            })
            .catch((err) => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //微信登录
    wxlogin() {
      this.$store.dispatch("user/wxlogin").then((res) => {
        // console.log(res)
        // return
        if (res.code == 200) {
          if (getwxstate() && getwxstate() != "undefined") {
            getopenid({ state: getwxstate() })
              .then((res) => {
                this.$router.push("/wxbind");
              })
              .catch((res) => {
                delwxstate();
                getcodev2().then((res) => {
                  if (res.code == 200) {
                    setwxstate(res.data.state);
                    window.open(res.data.url, "_self");
                  }
                });
              });
          } else {
            getcodev2().then((res) => {
              if (res.code == 200) {
                setwxstate(res.data.state);
                window.open(res.data.url, "_self");
              }
            });
          }
        } else {
          this.loading = false;
        }
      });
    },
    //注册
    openLink() {
      window.open(this.href, "_self");
    },
  },
  async created() {
    try {
      if (this.$route.query.username) {
        this.username = this.$route.query.username;
        this.password = this.$route.query.username.substring(
          this.$route.query.username.length - 4
        );
        this.autoLoading = true;
        await this.handleLogin();
      }
    } catch (error) {
      console({ msg: error, uri: "wxlogin", platform: this.http }).then(
        (res) => {
          console.log(res);
        }
      );
    }

    if (!this.qyType("qianan")) {
      this.bgUrl = wfqa;
    } else {
      this.bgUrl = bg;
    }
    try {
      this.isShowLogJ = JSON.parse(this.initObj.setting).studentHoke
        ? JSON.parse(this.initObj.setting).studentHoke == "开启"
        : false;
    } catch (error) {
      console({ msg: error, uri: "wxlogin", platform: this.http }).then(
        (res) => {
          console.log(res);
        }
      );
    }
  },
  beforeDestroy() {
    document.title = this.initObj.alias;
  },
};
</script>

<style lang="scss" scoped>
.RootLoading {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  // justify-content: center;
  flex-direction: column;
  // justify-content: space-between;
  font-size: 1.2rem;
  background: url("~@/assets/mobile/banner.jpg") no-repeat;
  background-size: 100%;
  .content {
    padding: 6vh 4vw;
    background: #fff;
    margin-top: 22.5vh;
    border-top-right-radius: 1.75rem;
    border-top-left-radius: 1.75rem;
    width: 100%;
    height: 100%;
    .lable-item {
      font-size: 1rem;
      display: flex;
      flex-direction: column;
      margin-bottom: 2vh;
      span {
        color: #999;
        margin-bottom: 1vh;
      }
    }
  }
}
::v-deep {
  .el-input__inner {
    height: 7.2vh !important;
    line-height: 7.2vh !important;
    width: 100% !important;
    border: none !important;
    background: #f2f2f5;
  }
  input::-webkit-input-placeholder {
    font-size: 1rem;
    // color: #f00;
  }
}
.weixin {
  width: 100%;
  margin-top: 1vh;
  font-size: 1rem;
  img {
    height: 2.4rem;
    width: 2.4rem;
  }
}
</style>